<template>
      <div class="TabBar-item" @click="itemclick">
          <div v-if="show">
              <slot name="item-img"></slot>
          </div>
          <div v-else>
              <slot name="item-img-new"></slot>
          </div>
          <!-- :class="{ItemText:show}" -->
          <div :style="TextStyle" class="text">
              <slot name="item-text"></slot>
          </div>
      </div>
</template>
<script>
export default {
    name:"TabBar-item",
    props:{
        path:String,
        textColor:{
            type: String,
            default: "red",
        }
    },
    data() {
        return {
            // show:true,
        }
    },
    computed: {
        show(){
            return this.$route.path.indexOf(this.path) !== -1;
        },
        TextStyle(){
            return this.show ? {color:this.textColor} : {}
        }
    },
    methods: {
        itemclick(){
            // console.log(this.$route.path)
            if(this.$route.path !== this.path){
                this.$router.push(this.path);
            }
           
        }
    },
}
</script>
<style scoped>
.TabBar-item{
    flex: 1;
    text-align: center;
    background: rgba(100,100,100,0.3);
}
.TabBar-item img{
    margin-top: .146667rem;
    height: .64rem;
}
.text{
    color: rgba(169,179,178);
    margin: 0 auto;  
}
</style>